<template>
  <div>
    <Header :left="false" leftText="返回" title="维修人员选择" />
    <div>
      <van-sticky :offset-top="70">
        <div style="background-color: #FFFFFF;">
          <van-search
            v-model="searchValue"
            @keydown.enter.native="onSearch"
            show-action
            placeholder="请输人员姓名或工号"
          >
            <template #action>
              <div @click="onSearch" style="width:50px;text-align:center;">
                搜索
              </div>
            </template>
          </van-search>
          <div style="background-color: #F5F5F5;height:10px;"><span></span></div>
        </div>
      </van-sticky>

      <!-- 列表 -->
      <div class="textScroll">
        <div v-for="(item, index) in items" :key="item.userKey">
          <div class="divStyle" @click="select(index)">
            <van-row style="margin-top:2px;">
              <van-col span="19" style="font-weight:bold;color:#A9A9A9; margin-left:20px;">{{
                item.userName
              }}</van-col>
              <van-col span="2" style="color:#A9A9A9;"
                ><van-checkbox  checked-color="#138087" v-model="item.checked" shape="square"></van-checkbox
              ></van-col>
            </van-row>
            <van-divider />
          </div>
        </div>
      </div>
    </div>
    <van-button :block="true" v-show="btnShow" class="buttonRight" @click="confirm" type="primary" text="确认" />
  </div>
</template>

<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Search,
  Sticky,
  Toast,
  Dialog,
} from 'vant'
Vue.use(Cell)
Vue.use(CellGroup)

Vue.use(Button, Dialog)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Search)
Vue.use(Sticky)
import { _httpClient } from '@/libs/api'
import Header from '@/components/header.vue'
import { storage, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/utils'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, Col, Row, Search, Sticky },

  data() {
    return {
      btnShow: true,
      pageParam: { name: '' },
      chosenContactId: '1',
      screenWidth: 0,
      searchValue: '',
      active: 2,
      currentPage: 1,
      fileUrl: '',
      items: [
        // { id: 1, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 2, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 3, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 4, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 5, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 6, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 7, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 8, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 9, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 10, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 11, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 12, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 13, userName: '用户3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 14, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 15, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 16, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 17, userName: '用户5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
        // { id: 18, userName: '用户1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 19, userName: '用户2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 21, userName: '用户4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 22, userName: '用户22', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
      ],
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    this.onSearch()
  },
  mounted: function() {
    const oldHight = api.winHeight
    addEventListener('resize', () => {
      let newHight = api.winHeight
      this.btnShow = newHight < oldHight ? false : true
    })
  },
  methods: {
    //搜索
    async onSearch() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/user/userInfo/repairUserlist', {
          body: { userAccound: _this.searchValue },
        })

        if (res.code === 200) {
          Toast.clear()
          _this.items = res.rows
        } else {
          //alert(res.msg)
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },

    //点击选中事件
    select(i) {
      if (this.items[i].checked) {
        this.items[i].checked = false
      } else {
        this.items[i].checked = true
      }
    },

    //确认
    confirm() {
      
      //获取选中数据
      let selected = []
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].checked) {
          selected.push(this.items[i])
        }
      }
      if (selected.length > 1 ) {
         alert("只能指派一个维修工");
         return;
      }
      if (selected.length == 0 ) {
         alert("请选择指派的维修工");
         return;
      }

      //判断是否选择数据
      if (selected.length == 1) {
        storage.set('items', this.items)
        api.sendEvent({
          name: 'resultUser',
          extra: {
            selectUser: selected,
          },
        })
        api.closeWin()
      }
    },
  },
}
</script>

<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 9rem;
  bottom: -20px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
}
</style>
